<template>
  <div class="Popup-container" :style="`transform: translateX(${popupStore.right});`">
    <div class="Popop-header">
      <span class="left-title">{{ popupStore.storeTitle }}</span>
      <span class="right-close" @click="close">
        <span class="iconfont icon-guanbi"></span>
      </span>
    </div>
    <div class="mid-scrollbar">
      <div class="content">
        <New v-show="popupStore.storeTitle === '添加留言'" ref="NewRef"></New>
        <Detail v-show="popupStore.storeTitle === '留言详情'"></Detail>
      </div>
    </div>
    <div class="bottom-button" v-if="popupStore.storeTitle === '添加留言'">
      <Button
        height="48px"
        width="100px"
        type="secondary"
        size="large"
        :border="true"
        @click="close"
        >放弃</Button
      >
      <Button height="48px" width="200px" size="large" @click="submit">确定</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usePopupStore } from '@/stores/modules/Popup'
import New from './PopupType/New.vue'
import Detail from './PopupType/Detail.vue'
import Button from './Button.vue'
import { ref } from 'vue'
/** 初始化弹窗仓库 */
const popupStore = usePopupStore()
/** 获取添加子组件实例 */
const NewRef = ref()

/** 关闭 */
const close = () => {
  popupStore.close()
}

const submit = () => {
  if (popupStore.storeTitle === '添加留言') {
    NewRef.value?.addNote()
  }
}
</script>

<style scoped lang="scss">
.Popup-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transition: all 0.3s;
  margin-top: $topBar-height;
  position: fixed;
  right: 0;
  top: 0;
  height: calc(100vh - $topBar-height);
  width: $right-popup-width;
  box-shadow: 0px 0px 4px 0px rgba(#000, 0.1);
  backdrop-filter: blur(20px);
  z-index: 1;
  background-color: rgba($gray-10, 0.8);

  .Popop-header {
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $gray-0;

    .left-title {
      font-weight: 600;
      font-size: 16px;
    }

    .right-close {
      cursor: pointer;
      font-size: 16px;
    }
  }
  .mid-scrollbar {
    margin: 5px;
    flex: 1;
    overflow-y: auto;

    .content {
      padding: 15px;
      padding-top: 0;
    }
    /* 纵向滚动条样式 */
    &::-webkit-scrollbar {
      width: 5px;
      height: 10px;
    }
  }

  .bottom-button {
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
